<template>
    <div class="searchDetail">
        <div class="search_header">
            <input type="text" v-model="text" placeholder="家常菜" disabled>
            <router-link to="/search">
                <button>取消</button>
            </router-link>
        </div>
        <div v-if="myloading" class="loading">
            <van-loading size="100px" color="#ec344e" />
        </div>
        <div v-else>
            <div class="box" v-for="(item,i) in datas" :key="i" v-if="item.r">
                <div class="box_header"><img :src="item.r?.img" alt=""  @click="goDetail(item.r?.id)"></div>
                <div class="box_bottom">
                    <div class="recipe_name">
                        {{ item.r?.n }}
                    </div>
                    <div class="num">
                        {{ item.r?.fc }}分
                    </div>
                    <div class="user">
                        <div class="user_photo">
                            <img :src="item.r?.a?.p" alt="">
                        </div>
                        <div class="user_name">
                            {{ item.r?.a?.n }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
import http from '@/api/request';
export default {
    data(){
        return {
            datas: [],
            text: '',
            myloading: false,
            id:''
        }
    },
    async created(){
        // 使用 $route.params 获取参数
        this.text = this.$route.params.keyword;
        this.myloading = true;
        await http.get(`recipe/search?keyword=${this.text}`)
        .then(
            content => {
                console.log('--->', content.result);
                let banners = content.result.list;
                this.datas = banners;
                console.log(this.datas)
            }
        )
        .catch(error => {
            console.error("Error fetching data:", error);
        })
        // 请求之后
        setTimeout(() => {
            // 隐藏loading
            this.myloading = false;
        }, 500);
    },
    methods: {
        goDetail(id){
            if(id ==''){
                return false;
            }
            console.log(id);
            this.$router.push({
                name: 'recipesDetail',
                params: { keyword: id},
            });
        }
    },
}
</script>

<style lang="less">
    .searchDetail{
        width: 100%;
        .search_header{
            display: flex;
            width: 100%;
            padding: 10px;
            input{
                color: rgba(192,196,204);
                background-color: #eee;
                height: 35px;
                border-radius: 4px;
                padding: 15px;
                font-size: 15px;
                width: 85%;
            }
            a{
                margin-left: 15px;
                display: block;
                background-color: transparent;
                button{
                font-size: 12px;
                background-color: transparent;
                }
            }
        }
        .loading{
            width: 100%;
            margin-top: 100px;
            padding-left: 35%;
        }
        .box{
            padding: 15px;
            display: flex;
            img{
                width: 150px;
                height: 100px;
                object-fit: cover;
            }
            .box_bottom{
                margin-left: 10px;
                .recipe_name{
                    font-size: 16px;
                    font-weight: 700;
                }
                .num{
                    font-size: 12px;
                }
                .user{
                    display: flex;
                    .user_photo{
                        img{
                            width: 15px;
                            height: 15px;
                            border-radius: 50%;
                        }
                        
                    }
                    .user_name{
                        font-size: 12px;
                        color: #aaa;
                    }
                }
                
            }
        }
    }
</style>